<template>
    <div class="ui fluid card" :class="{'raised': active }" 
        @mouseover="active = true" 
        @mouseout="active = false">
        <div class="header">
            <span v-if="type === 'my'">
                <b >{{title}}</b>
                <span class="right floated">
                    {{commentsNum}} 评论 &nbsp;&nbsp;{{likesNumData}} 收藏
                </span>
            </span>

            <div class="ui avatar" v-if="type === 'square'">
                <img :src="avatar" alt=""> {{nickname}}
            </div>
        </div>

        <div class="content">
            <div v-if="type === 'square'">
                <h2 class="square title">{{title}}</h2>
            </div>
            <div class="image" v-if="imgURL">
                <img :src="imgURL"/>
            </div>
            <div class="excerpt">{{excerpt}}</div>
            <div class="ui hidden divider"></div>
            <button class="ui basic blue button" @click="$router.push({path: articalURL})">更多</button>
        </div>
        <div class="extra content">
            <span class="right floated">
                <i></i>
                创建于 {{createdTime}}
            </span>
            <span v-if="type === 'square'">
                <span><i class="comment icon"></i>{{commentsNum}} 评论 &nbsp;&nbsp;</span>
                <span @click="collect(aid)" class="pointer"><i class="heart outline icon"></i>{{likesNumData + (!isCollectData ? ' 收藏' : ' 取消收藏') }} &nbsp;&nbsp;</span>
            </span>
            
            <span v-if="type === 'my'">
                <span class="delete" @click="publish(aid)" >
                    <span v-if="!isPublishData">
                        <i class="cloud icon"></i>发布
                    </span>
                    <span v-else>
                        <i class="lock icon"></i>设为私密
                    </span>
                </span>&nbsp;&nbsp;
                <span class="delete" @click="deleteArtical(aid)"><i class="trash alternate icon"></i>删除</span>
            </span>  
                     
        </div>
    </div>
</template>
<script>
import {api_artical} from '@/api'
export default {
    activated () {
        this.initComponentData()
    },
    data () {
        return {
            active: false,
            likesNumData: 0,
            isCollectData: false,
            isPublishData: false
        }
    },
    mounted () {
        this.initComponentData()
    },
    methods: {
        deleteArtical (aid) {
            this.$confirm('删除后无法恢复，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(_ => {
                this.$http({
                    method: 'delete',
                    url: api_artical + '/delete',
                    data: {
                        aid: aid
                    }
                })
                .then(_ => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.$emit('refresh')
                })
            })
        },
        publish (aid) {
            this.isPublishData = !this.isPublishData
            this.$http({
                method: 'put',
                url: api_artical + '/is-publish',
                data: {
                    aid: aid,
                    isPublish: this.isPublishData
                }
            })
            .then(_ => {
                this.$message({
                    type: 'success',
                    message: '设置成功'
                })
            })
        },
        collect (aid) {
            this.isCollectData = !this.isCollectData
            this.$http({
                method: 'put',
                url: api_artical + '/is-collect',
                data: {
                    aid: aid,
                    isCollect: this.isCollectData
                }
            })
            .then(_ => {
                this.$message({
                    type: 'success',
                    message: '设置成功'
                })
                this.likesNumData += this.isCollectData ? 1 : -1
            })
        },
        initComponentData () {
            this.likesNumData = this.likesNum
            this.isCollectData = this.isCollect
            this.isPublishData = this.isPublish
        }
    },
    props: {
        excerpt: String,
        likesNum: Number,
        commentsNum: Number,
        title: String,
        imgURL: String,
        articalURL: String,
        createdTime: String,
        isPublish: Boolean,
        avatar: String,
        nickname: String,
        aid: String,
        type: String,
        isCollect: Boolean
    }
}
</script>
<style lang="stylus" scoped>
.ui.card
    .header
        padding 15px
.image
    margin -1em
    margin-bottom 1em
    img
        max-width 100%
.square.title
    margin-bottom 20px

.delete
    cursor pointer

.ui.avatar
    img
        margin-right 10px
        vertical-align middle
</style>
